<script>
import MyItem from './MyItem.vue'
import 'animate.css';

export default {
  name: "MyList",
  components: {
    MyItem
  },
  //通过父组件将todos传进来
  props: ['todos']
}
</script>

<template>
  <div>
    <ul>
      <transition-group name="animate__animated animate__bounce"
                        appear
                        enter-active-class="animate__headShake"
                        leave-active-class="animate__backOutDown"
      >
        <MyItem v-for="(todoObj) in todos" :key="todoObj.id" :todoObj="todoObj"/>
      </transition-group>
    </ul>
  </div>
</template>

<style scoped>
div {
  width: 560px;
  margin: 20px auto;
}

ul {

  list-style-type: none;
  border-top: none;
  padding: 0;

}

ul li {
  padding: 0;
  width: 560px;
  height: 30px;
  margin: 0 auto;
  border: 1px solid black;

}

.todo-enter-active {
  animation: todo 0.5s linear;
}

.todo-leave-active {
  animation: todo 0.5s linear reverse;
}

@keyframes todo {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>